<template>
  <div class="container">
    <nav-bar @bar-change="barChange"/>
    <div class="content">
      <first v-if="activeIndex == 1" />
      <blogs v-if="activeIndex == 2" />
      <videos v-if="activeIndex == 3" />
      <user v-if="activeIndex == 5" />
    </div>
  </div>
</template>

<script>
import NavBar from "../../components/navbar/index"
import First from "../first/index";
import Videos from "../videos/index";
import Blogs from "../blogs/index";
import User from "../user/index";
export default {
  name: "Home",
  components: {
    NavBar,
    First,
    Videos,
    Blogs,
    User,
  },
  data() {
    return {
      activeIndex:1
    };
  },
  created() {
    
  },
  methods: {
    barChange(data) {
      this.activeIndex = data
    }
  },
};
</script>

<style lang="scss" scoped>
.container {
  width: 100%;
  height: 100%;
  background: #f5f6f7;
}
.content {
  width: 100%;
  box-sizing: border-box;
  padding: 25px 50px;
}

</style>